<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style> 
			body>div{
				width: 500px;
				height: 100px;
				background-color: #cccccc; 
				margin: 20px;
			}
		
			.c1{ 
				text-align: center;
				line-height: 100px;
			}
			
			.c2{
				display: flex; 
			}
			
			.c2-1{
				margin:auto;
				width: auto;
				height: auto;
				background-color: green;
			}
			
			#box { 
			  width: 50vw; 
			  height: 50vh; 
			  margin: 25vh auto; 
			  color:#FFFFFF;
			}
		</style>
	</head>
	<body>  
		<div>
			<div style="margin: 0 auto;width: 100px;height: 40px;background-color: #008000;">元素左右居中</div>
		</div>
		
		<div class="c1">
			文字空间居中 text-align/line-height
		</div>
		
		<div class="c2">
			<div class="c2-1">元素空间居中display/margin</div>
		</div>
		
		<div style="display: flex;align-items: center;justify-content: center;">
		    <div style="width: 100px;height: 50px;background-color: gray;">flex 布局</div>
		</div>
		
		<div style="position: relative;">
			<div style="position: absolute;
			     width: 200px;
			     height: 50px;
			     margin: auto;
			     top: 0;
			     left: 0;
			     bottom: 0;
			     right: 0;
			     background-color: green;">水平垂直居中absolute</div>
		</div>
		
		<div style="position: relative;">
			<div style="position: absolute;
			     width:200px;
			     height:50px;
			     top: 50%;
			     left: 50%;
			     transform: translate(-50%, -50%);
			     background-color: blue;">水平垂直居中absolute</div>
		</div>
		
		<div id="box">vm vh 居中</div>
	</body>
</html>
